<template>
  <Transition name="loading-fade">
    <div v-if="visible" class="loading-overlay">
      <div class="loading-content">
        <!-- 二次元露营图标 -->
        <div class="loading-icon-wrapper">
          <div class="camping-scene">
            <!-- 帐篷 -->
            <div class="tent">
              <div class="tent-left"></div>
              <div class="tent-right"></div>
              <div class="tent-door"></div>
            </div>
            <!-- 篝火动画 -->
            <div class="campfire">
              <div class="fire flame-1"></div>
              <div class="fire flame-2"></div>
              <div class="fire flame-3"></div>
              <div class="wood"></div>
            </div>
            <!-- 星星装饰 -->
            <div class="stars">
              <div class="star star-1">✨</div>
              <div class="star star-2">⭐</div>
              <div class="star star-3">💫</div>
            </div>
          </div>
        </div>

        <!-- 加载文字 -->
        <div class="loading-text">
          <h2>{{ title }}</h2>
          <div class="loading-dots">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </div>
          <p class="loading-tip">{{ tip }}</p>
        </div>

        <!-- 进度条 -->
        <div v-if="showProgress" class="progress-bar">
          <div class="progress-fill" :style="{ width: progress + '%' }">
            <div class="progress-glow"></div>
          </div>
          <span class="progress-text">{{ progress }}%</span>
        </div>
      </div>

      <!-- 背景装饰 -->
      <div class="bg-decoration">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
        <div class="circle circle-3"></div>
        <div class="sakura sakura-1">🌸</div>
        <div class="sakura sakura-2">🌸</div>
        <div class="sakura sakura-3">🌸</div>
      </div>
    </div>
  </Transition>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: 'DevOps自动化运维系统'
  },
  tip: {
    type: String,
    default: '加载中，请稍候...'
  },
  showProgress: {
    type: Boolean,
    default: false
  },
  progress: {
    type: Number,
    default: 0
  }
})
</script>

<style scoped>
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647; /* CSS z-index最大值，确保始终在最顶层 */
  overflow: hidden;
}

.loading-content {
  text-align: center;
  z-index: 2;
  position: relative;
}

/* 露营场景 */
.loading-icon-wrapper {
  margin-bottom: 30px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.camping-scene {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 0 auto;
}

/* 帐篷 */
.tent {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 80px;
}

.tent-left {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 80px solid #ff6b6b;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  animation: tentGlow 2s ease-in-out infinite;
}

.tent-right {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 80px solid #ffa94d;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  animation: tentGlow 2s ease-in-out infinite 0.1s;
}

.tent-door {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 20px;
  height: 30px;
  background: #4a4a4a;
  border-radius: 10px 10px 0 0;
}

@keyframes tentGlow {
  0%, 100% {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) brightness(1);
  }
  50% {
    filter: drop-shadow(0 4px 12px rgba(255, 107, 107, 0.5)) brightness(1.1);
  }
}

/* 篝火 */
.campfire {
  position: absolute;
  left: 20px;
  bottom: 10px;
  width: 30px;
  height: 40px;
}

.fire {
  position: absolute;
  bottom: 10px;
  width: 10px;
  height: 20px;
  background: linear-gradient(180deg, #ff6b6b 0%, #ffa94d 50%, #ffd93d 100%);
  border-radius: 50% 50% 20% 20%;
  animation: fireFlicker 0.8s ease-in-out infinite;
}

.flame-1 {
  left: 0;
  animation-delay: 0s;
}

.flame-2 {
  left: 10px;
  animation-delay: 0.2s;
  height: 25px;
}

.flame-3 {
  left: 20px;
  animation-delay: 0.4s;
}

@keyframes fireFlicker {
  0%, 100% {
    transform: scaleY(1) translateY(0);
    opacity: 1;
  }
  50% {
    transform: scaleY(1.3) translateY(-5px);
    opacity: 0.8;
  }
}

.wood {
  position: absolute;
  bottom: 0;
  left: 5px;
  width: 20px;
  height: 8px;
  background: #8b4513;
  border-radius: 2px;
}

/* 星星 */
.stars {
  position: absolute;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  font-size: 20px;
  animation: twinkle 2s ease-in-out infinite;
}

.star-1 {
  top: 10px;
  left: 20px;
  animation-delay: 0s;
}

.star-2 {
  top: 20px;
  right: 30px;
  animation-delay: 0.7s;
}

.star-3 {
  top: 50px;
  left: 10px;
  animation-delay: 1.4s;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* 加载文字 */
.loading-text {
  color: white;
  margin-top: 20px;
}

.loading-text h2 {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 15px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
}

/* 加载点动画 */
.loading-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 15px 0;
}

.dot {
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  animation: dotBounce 1.4s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.dot:nth-child(1) {
  animation-delay: 0s;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.loading-tip {
  font-size: 16px;
  margin: 10px 0 0 0;
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 进度条 */
.progress-bar {
  margin-top: 30px;
  width: 300px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.progress-glow {
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    left: -50%;
  }
  100% {
    left: 150%;
  }
}

.progress-text {
  position: absolute;
  top: -25px;
  right: 0;
  color: white;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 1;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: circleFloat 20s ease-in-out infinite;
}

.circle-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.circle-2 {
  width: 300px;
  height: 300px;
  bottom: 10%;
  right: 10%;
  animation-delay: 5s;
}

.circle-3 {
  width: 150px;
  height: 150px;
  top: 50%;
  left: 80%;
  animation-delay: 10s;
}

@keyframes circleFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-30px, 30px) scale(0.9);
  }
}

/* 樱花装饰 */
.sakura {
  position: absolute;
  font-size: 24px;
  animation: sakuraFall 15s linear infinite;
  opacity: 0.6;
}

.sakura-1 {
  top: -50px;
  left: 20%;
  animation-delay: 0s;
}

.sakura-2 {
  top: -50px;
  left: 50%;
  animation-delay: 5s;
}

.sakura-3 {
  top: -50px;
  left: 80%;
  animation-delay: 10s;
}

@keyframes sakuraFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 过渡动画 */
.loading-fade-enter-active,
.loading-fade-leave-active {
  transition: opacity 0.3s ease;
}

.loading-fade-enter-from,
.loading-fade-leave-to {
  opacity: 0;
}
</style>
